import {Button, Modal, message, Table} from 'antd'
import React, {useState, useEffect} from 'react'
import {PlusOutlined} from '@ant-design/icons'
import type {ColumnsType} from 'antd/es/table'
import CustomTable from '@/components/Table'
import {getGoodsList} from '@/service/storage/outDepot'
import styles from './index.less'

interface DataType {
	id?: string
	goodsType?: string
	vin?: string
	number?: string
	carFullName?: string
	goodsQuantity?: number
	carId?: string
}

const materialTable = (props: any) => {
	const {data, edit, setDataList, outWarehouse, outWarehouseType} = props
	const [total, setTotal] = useState()
	const [loading, setLoading] = useState(false)
	const [params, setParams] = useState({
		current: 1,
		size: 10,
	})
	const [vehicleList, setVehicleList] = useState<any[]>([])
	const [isModalOpen, setIsModalOpen] = useState(false)
	const [checkData, setCheckData] = useState<any>()
	const [columns, setColumns] = useState<ColumnsType<DataType>>()

	// 获取仓库车辆列表
	const getData = () => {
		const query = {
			...params,
			inWarehouse: outWarehouse?.id,
			goodsType: '1',
		}
		getGoodsList(query)
			.then((res: any) => {
				setVehicleList(res?.data?.records)
				setTotal(res?.data?.total)
				setLoading(false)
			})
			.catch((err) => {
				setVehicleList([])
				message.error(err)
				setLoading(false)
			})
	}
	useEffect(() => {
		if (outWarehouse) {
			getData()
		}
	}, [params, outWarehouse])

	useEffect(() => {
		const newColumns: ColumnsType<DataType> = [
			{
				title: '车牌号',
				dataIndex: 'carNo',
				align: 'center',
				width: 150,
			},
			{
				title: '车架号',
				dataIndex: 'carFrameNo',
				align: 'center',
				width: 150,
			},
			{
				title: '品牌/车系/车型',
				dataIndex: 'carModel',
				align: 'center',
				width: 150,
			},
		]
		if (edit && outWarehouseType === '2') {
			newColumns.push({
				title: '操作',
				key: 'action',
				align: 'center',
				width: 100,
				render: (text: any, record) => (
					<Button
						type="link"
						onClick={() => {
							setDataList(
								data.filter(
									(item: {id: string | undefined}) =>
										item.id !== record.id,
								),
							)
						}}>
						删除
					</Button>
				),
			})
		}
		setColumns(newColumns)
	}, [edit])

	const modalolumns: ColumnsType<DataType> = [
		{
			title: '车牌号',
			dataIndex: 'carNo',
			align: 'center',
			width: 120,
		},
		{
			title: '车架号',
			dataIndex: 'carFrameNo',
			align: 'center',
			width: 150,
		},
		{
			title: '品牌/车系/车型',
			dataIndex: 'carModel',
			align: 'center',
			width: 150,
		},
	]
	const handleOk = () => {
		if (checkData) {
			const newData = [
				{
					goodsType: '1',
					carId: checkData?.carId,
					carFrameNo: checkData?.carFrameNo,
					carNo: checkData?.carNo,
					carModel: checkData?.carModel,
					inOutType: '0',
					goodsQuantity: 1,
				},
			]
			setDataList(newData)
			setIsModalOpen(false)
		} else {
			message.warning('请选择车辆')
		}
	}

	return (
		<div className={styles.MaterialTable}>
			<div className={styles.title}>
				车辆信息
				{edit && outWarehouseType !== '2' ? (
					<Button
						icon={<PlusOutlined />}
						type="primary"
						ghost
						size="small"
						style={{marginLeft: '24px'}}
						onClick={() => {
							if (outWarehouse) {
								setIsModalOpen(true)
							} else {
								message.warning('请先选择出库仓')
							}
						}}>
						选择车辆
					</Button>
				) : (
					''
				)}
			</div>
			<Table columns={columns} dataSource={data} />
			<Modal
				width={600}
				title="选择车辆"
				destroyOnClose
				open={isModalOpen}
				onOk={handleOk}
				onCancel={() => setIsModalOpen(false)}>
				<CustomTable
					type="radio"
					params={params}
					columns={modalolumns}
					total={total}
					pagination
					kid="carId"
					callback={(pagination: any) => {
						setParams(pagination)
					}}
					showRowSelection
					selectCallback={(keys: any, selectData: any) => {
						setCheckData(selectData[0])
					}}
					loading={loading}
					dataSource={vehicleList}
				/>
			</Modal>
		</div>
	)
}

export default materialTable
